<!-- 排行榜单 -->
<template>
	<border cardTitle="排行榜单">
		<div style="margin: 0 5px; height: 100%" v-if="!isNull">
			<div class="table_head" :style="{ fontSize: (16 * pageScale > 14 ? 16 * pageScale : 14) + 'px' }">
				<div class="tr1 tr">支行名称</div>
				<div class="tr5 tr">排名</div>
				<div class="tr5 tr">用信金额</div>
				<div class="tr5 tr">授信金额</div>
				<div class="tr5 tr">评估金额</div>
				<div class="tr5 tr">抵押金额</div>
			</div>
			<div class="table_body" :style="{ fontSize: 14 * pageScale + 'px' }">
				<!-- tableTop随时间推移不对增减，即列表不断往上 -->
				<vueSeamlessScroll class="table_list" v-if="isloading" :data="tableList" :class-option="optionSingleHeight">
					<div class="tr_div" v-for="(item, index) in tableList" :key="index + 'a'" :class="{ firstrow: index == 0 }">
						<div class="tr1 tr" :title="item.deptName">{{ item.deptName }}</div>
						<div class="tr3 tr">
							<div class="rank" :class="['rank' + (index + 1)]" v-if="index == 0">
								<img src="/no1.png" alt="" />
							</div>
							<div class="rank" :class="['rank' + (index + 1)]" v-if="index == 1">
								<img src="/no2.png" alt="" />
							</div>
							<div class="rank" :class="['rank' + (index + 1)]" v-if="index == 2">
								<img src="/no3.png" alt="" />
							</div>
							<div class="rank" :class="['rank' + (index + 1)]" v-if="index > 2">
								<span>No.{{ index + 1 }}</span>
							</div>
						</div>
						<div class="tr5 tr num" :title="priceFormat(item.useCost, 2)">{{ priceFormat(item.useCost, 2) }}万</div>
						<div class="tr5 tr num" :title="priceFormat(item.creditCost, 2)">{{ priceFormat(item.creditCost, 2) }}万</div>
						<div class="tr5 tr num" :title="priceFormat(item.assessCost, 2)">{{ priceFormat(item.assessCost, 2) }}万</div>
						<div class="tr5 tr num" :title="priceFormat(item.pledgeCost, 2)">{{ priceFormat(item.pledgeCost, 2) }}万</div>
					</div>
				</vueSeamlessScroll>
			</div>
		</div>
		<div v-else style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">
			<img src="/img/dashboard/nullPng.png" alt="" />
		</div>
	</border>
</template>
<script>
import border from '../borderBottom.vue';
import StatisticsMixins from '../../../StatisticsMixins';
import { bigScreenApi } from '@/api/index';
import vueSeamlessScroll from 'vue-seamless-scroll';

export default {
	components: { border, vueSeamlessScroll },
	data() {
		return {
			tableList: [],
			tableTimer: null,
			tableTop: 0, //列表向上移动的像素
			showFlag: false,
			componentTimer: null,
			maxCanSee: 3, //maxCanSee代表可视范围内的最大完整数据条数
			tableLineHeight: 50, //tableLineHeight代表列表中一行的高度
			isStart: false,
			isloading: false,
			isNull: true
		};
	},
	mixins: [StatisticsMixins],
	computed: {
		// 滚动动画
		optionSingleHeight() {
			return {
				singleHeight: 50,
				waitTime: 2000,
				// step: 1,
				direction: 1,
				limitMoveNum: 3,
				openWatch: true
			};
		}
	},
	watch: {
		level: {
			handler(newV, oldV) {
				this.getInfo();
			},
			immediate: true
		}
	},
	destroyed() {},
	props: {
		level: {
			type: [String, Number],
			default: 0
		},
		cityId: {
			type: [String, Number],
			default: ''
		}
	},

	created() {},
	methods: {
		getInfo() {
			this.isloading = false;
			this.$postAction(bigScreenApi.findUseRanking, {
				xzqhbm: this.level > 1 ? this.cityId : '',
				level: this.level
			}).then(res => {
				if (res && res.code == 1) {
					let list = res.data;
					this.tableList = [...list];
					this.isloading = true;
					this.isNull = this.tableList.length == 0 ? true : false;
				}
			});
		}
	}
};
</script>

<style scoped lang="less">
.table_head {
	width: 100%;
	height: 0.4rem;
	line-height: 0.4rem;
	display: flex;
	color: #d6e3ff;
	text-align: center;
	font-size: 0.14rem;
	font-weight: 600;
	padding: 0 0.18rem;
}
.tr1 {
	width: 25%;
}
.tr2 {
	width: 25%;
}
.tr3 {
	width: 15%;
}

.tr4 {
	width: 18%;
}
.tr5 {
	flex: 1;
}
.tr {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	box-sizing: border-box;
	padding: 0 0.05rem;
	text-align: center;
}

.table_body {
	width: 100%;
	height: 1.4rem;
	overflow: hidden;
	position: relative;
	color: #24292e;
	font-size: 0.14rem;
}

.table_list {
	width: 100%;
	height: 1.4rem;

	// position: absolute;
	transition: all 0.5s;
	padding: 0 0.18rem;
}

.tr_div {
	width: 100%;
	display: flex;
	color: #ffffff;
	text-align: center;
	line-height: 0.5rem;
	font-size: 0.14rem;
	font-weight: bold;
	position: relative;
}
.tr_div > div {
	position: relative;
}
.firstrow {
	// font-size: 18px;
}
// .firstrow:before {
// 	background: linear-gradient(88deg, #5adede 0%, rgba(90, 222, 222, 0.28) 100%);
// 	transform: skew(-30deg, 0deg);
// 	position: absolute;
// 	content: '';
// 	display: block;
// 	height: 100%;
// 	width: 100%;
// 	z-index: 0;
// 	opacity: 0.2;
// }
.firstrow .tr1 {
	// color: #047773;
}
// .rank1,
// .rank2,
// .rank3 {
// 	color: #fff;
// 	position: relative;
// }
.rank > span {
	position: relative;
	// color: #24292e;
	font-size: 0.16rem;
}
// .rank1 > img {
// 	width: 43px !important;
// 	height: 46px !important;
// }
.rank > img {
	width: 0.35rem;
	height: 0.39rem;
}
// .rank1 {
// }
// .rank2,
// .rank3 {
// 	font-size: 18px;
// }
// .rank1:before,
// .rank2:before,
// .rank3:before {
// 	background: linear-gradient(88deg, #f87c8e 0%, #fbc697 100%);
// 	transform: skew(-30deg, 0deg) translate(-10px, -50%);
// 	position: absolute;
// 	content: '';
// 	display: block;
// 	height: 100%;
// 	left: 20px;
// 	right: 20px;
// 	z-index: 0;
// 	top: 50%;
// }
// .rank1:before {
// 	background: linear-gradient(88deg, #f87c8e 0%, #fbc697 100%);
// }
// .rank2:before,
// .rank3:before {
// 	left: 30px;
// 	right: 30px;
// 	height: 80%;
// }
// .rank2:before {
// 	background: linear-gradient(88deg, #467dfe 0%, #49afff 100%);
// }
// .rank3:before {
// 	background: linear-gradient(88deg, #e49217 0%, #f4d471 100%);
// }
.num {
	// font-family: DIN;
}
</style>
